<template>
  <div class="container">
    <van-sticky :offset-top="44">
      <div class="header">
        <van-row type="flex">
          <div class="card-no">
            <span class="card-icon"></span>
            <span class="value">{{card_no|formatCard}}</span>
          </div>
          <div class="unit">人民币|本币</div>
        </van-row>
      </div>
    </van-sticky>
    <div class="classify">
      <van-row gutter="15">
        <van-col :span="6">
          <van-button round size="small" :type="radio == '1' ? 'warning' : 'default'" block @click="nearlyWeek">近一周</van-button>
        </van-col>
        <van-col :span="6">
          <van-button round size="small" :type="radio == '2' ? 'warning' : 'default'" block @click="nearlyMonth">近一月</van-button>
        </van-col>
        <van-col :span="6">
          <van-button round size="small" :type="radio == '3' ? 'warning' : 'default'" block @click="nearlyMonth3">近三月</van-button>
        </van-col>
        <van-col :span="6">
          <van-button round size="small" block @click="visible = true;">筛选</van-button>
        </van-col>
      </van-row>
    </div>
    <div class="list-wrapper">
      <van-cell-group v-for="(item, index) in listData" :key="index">
        <van-cell :title="item.info" size="large" :label="item.created_time">
          <template>
            <div class="orange">{{item.money}}</div>
            <div class="surplus">{{item.balance}}</div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <classify v-model="visible" :form="form" @change="handleClassifyChange" v-if="visible"></classify>
  </div>
</template>

<script>
import classify from './classify'
import moment from 'moment'
export default {
  components: { classify },
  data() {
    return {
      visible: false,
      radio: '1',
      card_no: '',
      form: {},
      listData: []
    }
  },
  onLoad(option) {
    this.form['bank_id'] = option.bank_id;
    this.card_no = option.card_no;
    this.nearlyWeek();
  },
  methods: {
    init() {
      let data = this.form;
      this.$q.recordLits(data)
      .then(res=>{
        this.listData = res.list;
      })
    },
    nearlyWeek() {
      this.radio = '1';
      this.form['time_end'] = moment().format('YYYY-MM-DD');
      this.form['time_start'] = moment().add(-7, 'd').format('YYYY-MM-DD');
      this.init();
    },
    nearlyMonth() {
      this.radio = '2';
      this.form['time_end'] = moment().format('YYYY-MM-DD');
      this.form['time_start'] = moment().add(-30, 'd').format('YYYY-MM-DD');
      this.init();
    },
    nearlyMonth3() {
      this.radio = '3';
      this.form['time_end'] = moment().format('YYYY-MM-DD');
      this.form['time_start'] = moment().add(-90, 'd').format('YYYY-MM-DD');
      this.init();
    },
    handleClassifyChange(data) {
      if(data.time_start) {
        this.radio = '';
        this.form = {
          ...this.form,
          ...data
        }
        this.init();
      }else{
        this.nearlyWeek()
      }
    }
  },
  filters: {
    formatCard(val) {
      val = val.replace(/^(\d{4})\d{4}(\d+)/, "$1****$2");
      return val;
    }
  }
}
</script>

<style lang="less" scoped>
  .container {
    background: #f4f4f4;
    width: 100%;
    height: calc(100vh - 44px);
  }
  .header {
    height: 50px;
    background: #ffffff;
    line-height: 50px;
    padding: 0 15px;
    .card-no{
      flex: 1;
      .card-icon{
        display: inline-block;
        vertical-align: middle;
        width:36px;
        height: 36px;
        background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1325 1024' xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M635.482 349.365c-9.035 0-16.564-6.024-18.07-15.06-3.012-28.61 0-58.729 0-88.846V120.47c0-4.518-1.506-30.118 1.506-30.118h91.858c3.012 0 1.506 54.212 1.506 60.235V307.2c0 6.024 3.012 18.07 0 22.588 0 3.012-1.506 7.53-3.011 10.541-4.518 9.036-19.577 7.53-27.106 7.53-16.565 1.506-30.118 1.506-46.683 1.506zM769.506 99.388c174.682 45.177 307.2 201.788 314.73 387.012 13.552 218.353-149.083 414.118-364.424 444.235-237.93 31.624-462.306-149.082-477.365-391.53-13.553-201.787 121.977-390.023 317.741-438.21V332.8c0 25.6-1.506 39.153 27.106 39.153 15.059 0 30.118-1.506 45.177 0 25.6 1.506 21.082 24.094 21.082 45.176v96.377c-9.035-18.07-42.165-10.541-57.224-10.541h-54.211c-12.047-1.506-16.565-7.53-18.07-18.07V210.823C406.587 263.529 329.787 384 329.787 513.506c0 164.141 124.988 310.212 289.13 332.8V670.118c0-7.53 3.011-16.565-6.024-16.565h-45.176c-13.553 0-40.66 4.518-43.67-15.059-1.507-10.541 0-22.588 0-33.13v-99.388c0 7.53 3.01 15.06 12.046 16.565 21.082 4.518 48.188 0 69.27 0 15.06 0 46.683-7.53 51.2 13.553 3.012 13.553 0 27.106 0 40.659v66.259c0 6.023 0 6.023 4.518 9.035 3.012 1.506 10.542 0 15.06 0v-85.835c0-15.06-6.024-45.177 18.07-45.177 22.588-3.011 48.188 0 70.776 0 15.06 0 43.67 6.024 42.165-18.07v88.847c0 10.54-4.518 33.13 0 42.164 13.553 30.118-79.812 15.06-88.847 18.071-6.024 1.506-3.012-1.506-4.518 6.024-1.506 3.011 0 9.035 0 12.047V844.8C873.412 822.212 999.906 677.647 999.906 512c0-129.506-76.8-249.976-192.753-304.188v240.94c0 4.519-3.012 30.119 0 33.13 0 9.036-4.518 18.07-15.059 18.07-22.588 4.519-51.2 0-73.788 0-15.059 0-36.141-6.023-43.67 10.542V424.66c0-15.059-7.53-49.694 12.046-54.212 18.07-6.023 79.812 12.047 82.824-15.059 4.518-39.153 0-84.33 0-124.988V99.388z' fill='%23009C96'/%3E%3C/svg%3E")
      }
      .value{
        display: inline-block;
        vertical-align: middle;
        position: relative;
        top: 1px;
        font-size: 18px;
      }
    }
    .unit {
      color: #444444;
      font-size: 14px;
    }
  }

  .classify {
    margin: 10px 15px;
  }

  .orange {
    color: orange;
    font-size: 18px;
  }

  .surplus {
    color: #777777;
  }
</style>